<template>

   <!--顶部 布局不变-->
   <div class="top">
      <div id="top_button">
         <el-button  class="top_button"  @click="top_button_click" type="primary" :icon="icon" size="large" >
         </el-button>
      </div>

      <div id="daohang">
<!--         <BreadcrumbComponent></BreadcrumbComponent>-->
      </div>

      <div class="userimg">
         <el-menu
             :highlight-color="null"
             active-text-color="#ffd04b"
             background-color= "#ffffff"
             class="el-menu-vertical-demo"
             default-active="2"
             text-color="#000"
             :popper-offset=-40
         >
            <!--下拉框用法el-sub-menu -->
            <el-sub-menu show-timeout:100 class="m_sub" index="1">
               <template #title>
                  <el-avatar :shape="'square'"  :src="avatarUrl"/>
               </template>
               <el-menu-item  class="m_sub_item" index="1-1" @click="enter_right(1)">个人中心</el-menu-item>
               <el-menu-item @click="enter_right(2)" class="m_sub_item" index="1-2">首页</el-menu-item>
               <el-menu-item @click="Logout"  class="m_sub_item" index="1-5">退出登录</el-menu-item>
            </el-sub-menu>
         </el-menu>
      </div>
      <div id="jilu">历史记录</div>
   </div>
   <!-- 中部 操作界面-->
   <div class="mid">

   </div>
   <!-- 底部  数据展示-->
   <div class="bottom">
      <router-view></router-view>
<!--     <Test></Test>-->
   </div>
</template>


<script setup>
import {Fold, Expand} from "@element-plus/icons-vue";
import {useStore} from "vuex";
import {useRoute, useRouter} from "vue-router";
import {computed, onMounted, ref, watch} from "vue";
import Test from "@/components/Test.vue";
import axios from "axios";
import {ElMessage} from "element-plus";
let router = useRouter()
let userPath=["mine","welcome"]
let store = useStore()
let circleUrl = "https://p3-pc.douyinpic.com/img/tos-cn-avt-0015/b82fec6999782840effae074ca408056~c5_300x300.jpeg?from=2956013662"
const icon = computed(()=>{
   return store.state.isCollapse ? Expand : Fold
})

// 头像
const vip = ref(null);
const avatarUrl=ref('');
const storedData = localStorage.getItem('key');
if (storedData) {
  vip.value = JSON.parse(storedData);
  avatarUrl.value=vip.value.data.avatar;
  console.log(vip.value);
  console.log(avatarUrl.value);
}
axios.get(`http://127.0.0.1:9090/file/download2?fileName=${encodeURIComponent(avatarUrl.value)}`)
    .then((response) => {
      avatarUrl.value=`data:image/jpeg;base64,${response.data}`;
    })
    .catch((error) => {
      console.log(error);
    })
function Logout() {
   localStorage.removeItem("key");
   router.replace('/login')
}

function enter_right(index) {
   index--;
   router.push('/Home/'+userPath[index]);
}
function top_button_click() {
  store.commit("changeCollapse")
  console.log("按钮被点击"+store.state.isCollapse)
}

</script>


<style scoped>
/*----------------------------------*/
.fire {
   width: 100px;
   height: 100px;
   background-color: red;
   animation: flameAnimation 2s infinite, disappear 5s forwards;
}

@keyframes flameAnimation {
   0% {
      background-color: red;
      transform: scale(1);
      filter: brightness(1);
   }
   50% {
      background-color: orange;
      transform: scale(1.2);
      filter: brightness(1.5);
   }
   100% {
      background-color: red;
      transform: scale(1);
      filter: brightness(1);
   }
}

@keyframes disappear {
   0% {
      opacity: 1;
   }
   100% {
      opacity: 0;
      visibility: hidden;
   }
}
/*----------------------------------*/



.top {
   width: 100%;
   height: 100px;
   background-color: rgb(255, 255, 255);
   border-bottom: #2068cd solid 1px;
   box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.24);
   position: relative;
}

.mid {
   width: 100%;

}

.bottom {
   width: 100%;
overflow: hidden;
}

/*----------------------------------*/
#top_button {
   width: 70px;
   height: 70px;
   float: left;

}
.top_button{
   width: 40px;
   height: 40px;
   border: 0;
   margin-top: 15px;
   margin-left: 15px;
}
#daohang {
   width: 400px;
   height: 70px;
   position: absolute;
   left:80px;
   top:30px;

   float: left;
   line-height: 70px;
}

.el-menu-vertical-demo {
   z-index: 5;
   margin-top: 10px;
   user-select: none;
   width: 120px;
   background-color: #ffffff;
   height: 70px;

}
.userimg {
   width: 150px;
   height: 70px;
   padding-left: 40px;
   float: right;
}
.seaerch{
   width: 200px;
   height: 70px;
   float: right;
   line-height: 70px;
}
#jilu {
   width: 100%;
   height: 30px;
   background-color: white;
   clear: both;
}


</style>
